﻿<%@ Page Title="" Language="C#" MasterPageFile="~/GUI/User/UserChiTiet.master" AutoEventWireup="true" CodeBehind="ChiTietBaiHat.aspx.cs" Inherits="ProjectWebNhac.GUI.User.BaiHat" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="js/FancyBox/source/jquery.fancybox.js" type="text/javascript"></script>
    <link href="js/FancyBox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="js/FancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="js/FancyBox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
 <link href="js/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script src="js/main.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         var tempSong = '';


         $('.nologin').showPopup({
             top: 50,
             closeButton: ".close_popup",
             scroll: false,
             onClose: function () {
             }
         });

         $('#login').showPopup({
             top: 50,
             closeButton: ".close_popup",
             scroll: false,
             onClose: function () {
             }
         });

         $(".add").fancybox({
             'scrolling': 'no',
             'titleShow': false,
             width: 440,
             height: 340,
             'onClosed': function () {
                 $("#login_error").hide();
             }
         });
         $('.add').on("click", function () {
             tempSong = $(this).text();
         });
         var dropPlaylist = $('#<%=dropPlaylist.ClientID %>');
         $("#btnAdd").on("click", function () {
             if (dropPlaylist.val() == "-1") {
                 alert("Vui lòng chọn playlist");
             } else {
                 AddtoPlaylist();
             }
            
         });
         $("#btnCreate").on("click", function () {
             if ($('#txtPlaylist').val() == "" || $('#txtPlaylist').val() == null) {
                 alert("Vui lòng đặt tên playlist");
             } else {
                 CreateNewPL();
             }
             

         });
         function AddtoPlaylist() {
             var data = "{ 'MaPL': '" + dropPlaylist.val() + "','MaBaiHat':'" +
                 tempSong + "'}";
             $.ajax({
                 type: "POST",
                 url: "ChiTietBaiHat.aspx/AddPlayList",
                 data: data,
                 contentType: "application/json",
                 dataType: "json",
                 success: function (msg) {
                     if (msg.d) {
                         alert("Thêm bài hát thành công");
                         $.fancybox.close();
                     } else {
                         alert("Bài hát này đã tồn tại");
                     }


                     // Replace the div's content with the page method's return.

                 }
             });
         }
         var taikhoan = $('#<%=txtUserName.ClientID%>');
         function CreateNewPL() {
             var data = "{ 'tenPlaylist': '" + $('#txtPlaylist').val() + "','taikhoan':'" +
                 taikhoan.val() + "'}";
             $.ajax({
                 type: "POST",
                 url: "ChiTietBaiHat.aspx/CreateNewPL",
                 data: data,
                 contentType: "application/json",
                 dataType: "json",
                 success: function (msg) {
                     if (msg.d != "failed") {
                         alert("Thêm playlist thành công");
                         dropPlaylist.append("<option value='" + msg.d +
                            "'>" + $('#txtPlaylist').val() + "</option>");
                         $('#txtPlaylist').val();
                         $.fancybox.close();
                     } else {
                         alert("Tên playlist này đã tồn tại");
                     }

                 }
             });
         }
     });
 </script>          
           
           
    <div class="main-top span9">
                            <div class="span9 no-margin">
                                <h1>Nghe nhạc online</h1>
                                <div class="options-line">
                                    <div class="breadcrumb-container">
                                        <ul class="breadcrumb">
                                            <li><a href="TrangChu.aspx">Trang chủ</a> <span class="divider">»</span></li>
                                            <li class="active">Nghe nhạc trực tuyến</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

    <asp:Repeater ID="reDetail" runat="server" onitemdatabound="reDetail_ItemDataBound" OnItemCommand="reDetail_ItemCommand">
       
    <ItemTemplate>
                         <section id="music-player" style="width: 870px;">
                                   <div id="jplayer_1" class="jp-jplayer-1" style="width: 0px; height: 0px;">
                                   <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
                                   <audio id="jp_audio_0" preload="auto" src="" __idm_id__="1916657665">
                                   <input type="hidden" id="path" value='../../Nhac/<%#Eval("LinkBaiHat") %>'>
                                   <input type="hidden" id="title" value='<%#Eval("TenBaiHat") %>'>
                                   </audio></div>


                                    <div id="jplayer_container" class="jp-audio">
                                        <div class="jp-type-playlist">
                                            <div class="jp-gui jp-interface" style="">
                                                <div class="span3 no-margin">
                                                    <div class="jp-playlist">
                                                        <ul style="display: block;"><li class="jp-playlist-current"><div>
                                                        <a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a>
                                                        <a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="1">J. Lang - In Peace, The Love &amp; Happiness Mix</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×
                                                        </a><a href="javascript:;" class="jp-playlist-item" tabindex="1">George Ellinas - Hornet</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">Pitx - Black Rainbow</a></div>
                                                        </li></ul>
                                                    </div>
                                                </div>
                                                <div class="span2">
                                                    <div class="jp-progress">
                                                        <div class="jp-seek-bar" style="width: 0%;">
                                                            <div class="jp-play-bar" style="width: 0%;"></div>

                                                        </div>
                                                    </div>
                                                    <div class="jp-current-time">00:00</div>
                                                    <div class="jp-duration">00:00</div>
                                                </div>
                                                <div class="span1">
                                                    <div class="jp-volume-bar" style="">
                                                        <div class="jp-volume-bar-value" style="width: 80%;"></div>
                                                    </div>
                                                    <ul class="jp-controls">
                                                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
                                                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
                                                        <li class="pull-right"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume" style="">max volume</a></li>
                                                    </ul>
                                                </div>
                                                <div class="span3">
                                                    <ul class="jp-controls player-controls">
                                                        <li><a href="javascript:;" class="jp-play" tabindex="1" style="">play</a></li>
                                                        <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
                                                        <li><%if (Session["ThanhVien"] != null)
                                              {
                                                %>
                                                  <a href='#playlistAdd' class='add'><%#Eval("MaBaiHat") %></a>
                                                <%  
                                              }
                                              else
                                              { %>
                                            <a  href="#popup_login" class='nologin'><%#Eval("MaBaiHat") %></a>
                                           <%} %>
                                                        </li>
                                                        
                                                        <li><asp:ImageButton ID="imDown" CommandArgument='<%#Eval("LinkBaiHat") %>' CommandName="download" runat="server" ImageUrl="img/down.png" style="margin-top: 12px;width: 16px;margin-left: 20px;"></asp:ImageButton></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="jp-no-solution" style="display: none;">
                                                <span>Update Required</span>
                                                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                            </div>
                                        </div>
                                    </div>
                        </section>
      </ItemTemplate>
    </asp:Repeater>        
               
            <div class="span6 no-margin online-player album-article"  style="width: 565px;">

                             <div class="song" style="background-color:#f0f0f0">
                              <h1>Thông Tin Bài Hát</h1>
                             </div>
                            <asp:Repeater ID="reThongTinBaiHat" runat="server" 
                                 onitemdatabound="reThongTinBaiHat_ItemDataBound">
                            <ItemTemplate>
                            
                            <div class="info-line"><span>Tên Bài Hát : </span> 
                                <asp:Label ID="lbTenBH" runat="server" Text='<%#Eval("TenBaiHat") %>'></asp:Label> 
                                </div>
                            <div class="info-line"><span>Tên Ca Sĩ: </span>
                                <asp:Repeater ID="reDsCaSi" runat="server">
                                <ItemTemplate>
                                 <a href="ChiTietCaSi.aspx?MaCaSi=<%#Eval("MaCaSi") %>"><asp:Label ID="lbTenCasi" runat="server" Text='<%#Eval("TenCaSi") %>'></asp:Label></a>
                                </ItemTemplate>
                             </asp:Repeater>
                               
                                </div>
                            <div class="info-line"><span>Người đăng </span> 
                                <asp:Label ID="lbNguoiDang" runat="server" Text='<%#Eval("TaiKhoan") %>'></asp:Label>
                                </div>
                            <div class="info-line"><span>Lượt Nghe: </span> 
                                <asp:Label ID="lbLuotNghe" runat="server" Text='<%#Eval("LuotNghe") %>'></asp:Label>
                            </div>
                            <div class="info-line">
                            <span>Lời Bài Hát: </span>
                            </div>
                            <p class="description">
                            <asp:Label ID="lbLyric" runat="server" Text='<%#Eval("Lyric") %>'></asp:Label> 
                            </p>
                            </ItemTemplate>
                            </asp:Repeater>



                            <div class="song" style="background-color:#f0f0f0">
                              <h1>Thông Tin Ca Sĩ</h1>
                            </div>
                            <asp:Repeater ID="reThongTinCaSi" runat="server" 
                                 onitemdatabound="reThongTinCaSi_ItemDataBound">
                            <ItemTemplate>
                            
                            <figure>
                                     <img style="height:115px;width:115px" src="../../HinhAnh/CaSi/<%#Eval("HinhAnh") %>" alt="">
                            </figure>
                            <div class="info-line"><span>Tên Ca Sĩ: </span> 
                               <a href="ChiTietCaSi.aspx?MaCaSi=<%#Eval("MaCaSi") %>"><asp:Label ID="lbTenCasi" runat="server" Text='<%#Eval("TenCaSi") %>'></asp:Label></a>
                            </div>
                            <div class="info-line"><span> Ngày Sinh :</span> 
                                <asp:Label ID="lbNgaySinh" runat="server" Text='<%#Eval("NgaySinh") %>'></asp:Label>
                             </div>
                            <div class="info-line"><span>Công ty đại diện :</span> 
                                <asp:Label ID="lbCongTy" runat="server" Text='<%#Eval("CongTyDaiDien")%>'></asp:Label>
                             </div>
                            <div class="info-line"><span>Quốc Gia :</span>
                                <asp:Label ID="lbQuocGia" runat="server" Text='<%#Eval("TenQuocGia")%>'></asp:Label>
                            </div>


                            
                            <div class="song" style="background-color:#f0f0f0">
                             <h1>Bài Hát Cùng Ca Sĩ</h1>
                            </div>
                            <asp:Repeater ID="reBaiHatCungCaSi" runat="server" OnItemCommand="reBaiHatCungCaSi_ItemCommand">
                            <ItemTemplate>
                           <div class='track-line'>
                                <div class='span6 no-margin'>
                                   
                                    <div class="jp-audio custom" id="jp_container_1">
                                        <div class="jp-type-single">
                                            <div class="jp-gui jp-interface">
                                                
                                                <div class='name'>
                                                    <div class="jp-title">
                                                        <ul>
                                                            <li><a href="ChiTietBaiHat.aspx?MaBH=<%#Eval("MaBaiHat") %>"><%#Eval("TenBaiHat") %></a> </li>
                                                            <li>Trình bày : 
                                                                <asp:Repeater ID="reDSCaSiBaiHat" runat="server">
                                                                <ItemTemplate>
                                                                    <a href="ChiTietCaSi.aspx?MaCS=<%#Eval("MaCaSi") %>"><%#Eval("TenCaSi")%>,</a>  
                                                                </ItemTemplate>
                                                                </asp:Repeater>
                                                                
                                                            | <a href="#"><%#Eval("TenTheLoai") %></a></li>
                                                            <li>Đăng bởi : <a href="#"><%#Eval("TaiKhoan") %></a> | Ngày đăng:<%#Eval("NgayThem", "{0:dd-MM-yyyy}")%>| Lượt nghe: <%#Eval("LuotNghe") %></li>
                                                        </ul>
                                                    </div>
                                                    
                                                </div>
                                                <div class="right" style="width: 50px;">
                                            <%if (Session["ThanhVien"] != null)
                                              {
                                                %>
                                                 <a href='#playlistAdd' class='add'><%#Eval("MaBaiHat") %></a>
                                                <%  
                                              }
                                              else
                                              { %>
                                           <a  href="#popup_login" class='nologin'><%#Eval("MaBaiHat") %></a>
                                           <%} %>
                                             <asp:ImageButton ID="imDown" CommandArgument='<%#Eval("LinkBaiHat") %>' CommandName="download" runat="server" ImageUrl="img/down.png" style="margin-top: 7px;width: 16px;"></asp:ImageButton>
                                        
                                        </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            </ItemTemplate>
                            </asp:Repeater>

                            </ItemTemplate>
                            </asp:Repeater>
                           
                        </div>

            <div class="span3 other-albums"style="width: 265px;">

                            <h1>Album Cùng Ca Sĩ</h1>
                            <hr>

                            <asp:Repeater ID="reAlbumCungCaSi" runat="server">
                            <ItemTemplate>
                            <div class="artwork">
                                <a href="#">
                                    <div class="glow"></div>
                                    <img src="../../HinhAnh/Album/<%#Eval("HinhAnh") %>" alt="">
                                </a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            </ItemTemplate>
                            </asp:Repeater>
                        </div>



           <div class="main-top span9"  style="margin-top: 5px;">
<h4>Bình luận</h4>
      <div class="cmntcontainer">
						
						<div class="comment">
<%--							<textarea  class="txtcomment" name="txt" cols="0" rows="0"></textarea>--%>
                            <asp:TextBox ID="txtComment" class="txtcomment"  TextMode="MultiLine"  runat="server"></asp:TextBox>
						</div>
						<div class="commentaction">	
							<ul>
								<li>
                                <%if (Session["ThanhVien"] != null)
                                  {
                                     %>
                                     <asp:Button ID="btnBinhLuan" CssClass="registration btn btn-blue" runat="server" 
                                                      Text="Bình luận" onclick="btnBinhLuan_Click" />
                                     <% 
                                  }
                                  else
                                  { %>
                                  <a  href="#popup_login" id="login" class='registration btn btn-blue'>Bình luận</a>
                                  <%} %>
                                
                                </li>
								
							</ul>
						</div>
						<div class="clear"></div>
						<div class="commentsec">
                            <asp:Repeater ID="reComment" runat="server">
                            <ItemTemplate>
                             <div class="replyfrist">	
							<div class="reply1_cmnt">
								<h6><%#Eval("TaiKhoan") %>                                    <%#Eval("ThoiGian","{0:dd-MM-yyyy}") %></h6> 
                                <p>
									<%#Eval("LoiBinh") %>
								</p>
						</div>

						</div>
                            </ItemTemplate>
                            </asp:Repeater>
                               
                         
						
						
                   		<div class="clear"></div>
        			</div>
				<div class="clear"></div>
			</div>	
</div>       
   


                      <asp:TextBox style="display:none" ID="txtUserName" runat="server" Text=""></asp:TextBox>
                        <div style="display:none;width:300px;height:200px" id="playlistAdd" >
	
	    	        <p id="login_error">Thêm bài hát vào playlist</p>
		                     <p>
			<label for="login_name" style="width:100px;float:left">Chọn playlist: </label>
            <asp:DropDownList ID="dropPlaylist" style="margin-top: -3px;width: 190px;" runat="server">
            </asp:DropDownList>
		</p>
		                     <p>
			<input type="button" class="registration btn btn-blue" value="Thêm" id="btnAdd" />
		</p>
	                         <p>
            <label for="login_name" style="width:80px;float:left">Tên Playlist </label>
            <input type="text" id="txtPlaylist"/>
        </p>
                             <p>
			<input type="button" class="registration btn btn-blue" value="Tạo mới playlist" id="btnCreate" />
		</p>
                    </div>
                      
                                          
                  
</asp:Content>
